<template>
  <div class="hyDialog">
    <el-dialog
      center
      title="导入商品"
      v-model="dialogVisible"
      :width="dialogWidth"
      size="mini"
      empty-text="当前没有数据"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色功能" name="first">User</el-tab-pane>
        <el-tab-pane label="角色权限" name="second">Config</el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisibility(false)">取消</el-button>
          <el-button @click="addShop" type="primary">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    tableItems: {
      type: Array,
      default: () => [],
    },
    dialogWidth: {
      type: String,
      default: '30%',
    },
  },
  setup() {
    // 显示
    let dialogVisible = ref(false)
    // 隐藏dialog
    function changeVisibility(e: boolean) {
      dialogVisible.value = e
    }
    return { dialogVisible, changeVisibility }
  },
})
</script>

<style scoped lang="less">
.hyDialog {
}
</style>
